<template>
  <el-dialog v-model="Visible" title="举报">
    <div class="dialog-content">
      <div
        class="dialog-body"
        v-for="item in state"
        @click="handleClick(item.value)"
        :class="{ active: array.includes(item.value) }"
      >
        {{ item.label }}
      </div>
    </div>

    <el-input
      v-model="textarea"
      class="textarea"
      :rows="6"
      type="textarea"
      placeholder="我们想知道你举报的原因，你可以描述你遇到的问题、以及你对平台的建议。"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Visible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const Visible = ref(false)
const textarea = ref('')
const handleVisible = () => {
  textarea.value = ''
  array.value = []
  Visible.value = true
}
defineExpose({
  handleVisible
})

const state = ref([
  { label: '有害/不安全', value: 1 },
  { label: '色情低俗', value: 2 },
  { label: '谩骂攻击', value: 3 },
  { label: '违法犯罪', value: 4 },
  { label: '隐私相关', value: 5 },
  { label: '侵犯我的著作权、名誉权等', value: 6 },
  { label: '其他', value: 7 }
])
const array = ref([])

const handleClick = (value: number) => {
  if (array.value.includes(value)) {
    array.value = array.value.filter((item) => item !== value)
  } else {
    array.value.push(value)
  }
}

const submit = () => {
  if (textarea.value.trim() == '' && array.value.length === 0) {
    ElMessage({
      message: '请填写举报原因',
      type: 'warning'
    })
    return
  }
  Visible.value = false

  ElMessage({
    message: '举报已提交',
    type: 'warning'
  })
}
</script>
<style lang="less">
.el-dialog {
  width: 80% !important;
  max-width: 800px !important;
}

/* 大屏幕（≥ 992px）调整为 50% */
@media (min-width: 992px) {
  :deep(.el-dialog) {
    width: 50% !important;
  }
  .dialog-content {
    margin: -10px 0 -10px 0;
  }
}

@media (max-width: 900px) {
  .dialog-content {
    margin: -10px 0 65px 0 !important;
  }
}
.active {
  color: black;
  background-color: #ccc;
}
.dialog-content {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;

  .dialog-body {
    padding: 10px 10px 0 10px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin: 10px 10px 0 0;
    cursor: pointer;
    font-weight: 500;
    height: 30px;
  }

  .textarea {
    width: 100%;
  }
}
</style>
